<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>欢迎您，系统管理员</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style type="text/css">
        .breadcrumb {
            padding: 15px 15px;
            background-color: transparent;
            margin-bottom: 0px;
            display: inline-block;
        }

        .pull-right {
            padding: 7px;
        }

        .inline-block {
            display: inline-block;
        }

        .div1 {
            padding-left: 0px;
        }

        .menuRight {
            float: right;
        }

        .span1 {
            color: red;
        }

        .img {
            width: 20px;
            height: 20px;
        }

        .div2 {
            padding: 7px 0px;
        }
    </style>

</head>
<body>
<nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1"
                    aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">宿舍管理系统</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ol class="breadcrumb">
                <li><a href="#">首页</a></li>
                <li class="active">
                    当前用户：梁玉颖
                    <span class="span1">(系统管理员)</span>
                </li>
            </ol>

            <div class="btn-group pull-right div2" role="group" aria-label="...">
                <button type="button" class="btn btn-danger">退出系统</button>
            </div>
            <div class="btn-group menuRight pull-right">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                        aria-haspopup="true"
                        aria-expanded="false">
                    <img src="img/systemAdministrator.jpg" alt="..." class="img-circle img">
                </button>
                <ul class="dropdown-menu">
                    <li><a href="#">个人信息</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">注销</a></li>
                </ul>
            </div>
        </div>
    </div>
</nav>

<div class="container">
    <div class="col-md-2 col-sm-2 col-xs-2 div1">
        <div id="menus_div" class="list-group">
<!--            <a href="admin.html" class="list-group-item active">首页-->
<!--                <span class="glyphicon glyphicon-menu-right menuRight" aria-hidden="true"></span>-->
<!--            </a>-->
<!--            <a href="dormAdminManager.html" class="list-group-item">宿舍管理员管理-->
<!--                <span class="glyphicon glyphicon-menu-right menuRight" aria-hidden="true"></span>-->
<!--            </a>-->
<!--            <a href="stuManagement.html" class="list-group-item">学生管理-->
<!--                <span class="glyphicon glyphicon-menu-right menuRight" aria-hidden="true"></span>-->
<!--            </a>-->
<!--            <a href="dormManagement.html" class="list-group-item">宿舍楼管理-->
<!--                <span class="glyphicon glyphicon-menu-right menuRight" aria-hidden="true"></span>-->
<!--            </a>-->
<!--            <a href="absence.html" class="list-group-item">缺勤记录-->
<!--                <span class="glyphicon glyphicon-menu-right menuRight" aria-hidden="true"></span>-->
<!--            </a>-->
<!--            <a href="modifyPassword.html" class="list-group-item">修改密码-->
<!--                <span class="glyphicon glyphicon-menu-right menuRight" aria-hidden="true"></span>-->
<!--            </a>-->
        </div>
    </div>
    <div class="col-md-10 col-sm-10 col-xs-10 div2">
        <h1 id="welcome_h1" class="col-md-offset-2 col-sm-offset-2 col-xs-offset-2"></h1>
    </div>
</div>
<script>
    let menusJsonStr = sessionStorage.getItem("menus");
    let menus = JSON.parse(menusJsonStr);//原json格式的字符串，转换为json对象
    let type = sessionStorage.getItem("type");
    if (type == 0) {
        document.querySelector("#welcome_h1").textContent = "欢迎您，系统管理员！";
    } else if (type == 1) {
        document.querySelector("#welcome_h1").textContent = "欢迎您，宿舍管理员！";
    } else if (type == 2) {
        document.querySelector("#welcome_h1").textContent = "欢迎您，同学！";
    } else {
        document.querySelector("#welcome_h1").textContent = "非法登录";
    }

    let menus_div = document.querySelector("#menus_div");

    menus.forEach(( value, index) => {
        let menu_opt = `
			<a href="${value.href}" class="list-group-item ${index == 0 ? 'active' : ''}">${value.title}
				<span class="glyphicon glyphicon-menu-right menuRight" aria-hidden="true"></span>
			</a>
		`;
		menus_div.insertAdjacentHTML("beforeend", menu_opt);
    });
</script>
</body>
</html>
